import React, { Component } from 'react'
/**
 * 错误边界组件
 * 这里使用componentDidCatch来构建
 */
export default class ErrorBoundary extends Component {
    state = {
        hasError: false
    }
    // 捕获错误 
    // componentDidCatch
    // componentDidCatch(error, errorInfo){
    //     this.setState({
    //         error,
    //         errorInfo,
    //       	hasError: true
    //     })
    // }

    // static getDerivedStateFromError()
    // 获得从错误边界中产生的状态
    static getDerivedStateFromError(error){
        return {
            hasError: true
        }
        // 这里最好写为： return {hasError: error}
      	// 本质上是根据error是否存在来判断是否设置 hasError 为 true，但其实能够进入这个函数的话，也就代表一定会有错误，因此直接设置 hasError 为 true 也未尝不可
    }
    /*
        * JS中的&&符号：
        1、运算方法：
            只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
            只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
        2、总结：假前真后

        * componentStack会告知你是该错误是在组件哪个地方失效！
    */
    render() {
        // 出错时展示出错的UI
        if(this.state.hasError){
            return (
                <div>
                    {/*
                    	{this.state.error && this.state.error.toString()}
                      <br />
                      {this.state.errorInfo.componentStack}
                    */}
                		<h2>出错了！！</h2>
                </div>
            )
        }else{
            return this.props.children
        }
    }
}